<template>
  <div class="admin-web-works-add">
    <div class="submint-btn clearfix">
      <el-button
        class="w-float-right"
        size="mini"
        type="primary"
        @click="saveBtnClick">保存</el-button>
      <span class="w-float-right">&nbsp;&nbsp;</span>
      <el-button
        v-if="model._id"
        size="mini"
        class="w-float-right"
        @click="previewClick">预览</el-button>
    </div>
    <br>
    <el-form
      ref="form"
      :model="model"
      label-width="80px">
      <el-form-item
        :rules="[{ required: true, message: '不能为空'}]"
        label="作品名称"
        prop="name">
        <el-input v-model="model.name"/>
      </el-form-item>
      <el-form-item
        label="版本"
        prop="version">
        <el-input v-model="model.version"/>
      </el-form-item>
      <el-form-item
        label="地址"
        prop="url">
        <el-input v-model="model.url"/>
      </el-form-item>
      <!--是否显示早个人介绍里面-->
      <el-form-item
        label="个人介绍"
        prop="isShow">
        <el-switch v-model="model.isShow"/>
      </el-form-item>
      <el-form-item label="封页">
        <w-up-image
          ref="UP_IMAGE"
          :souce-url="model.cover"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="model.describe"
          type="textarea"/>
      </el-form-item>
      <el-form-item
        :rules="[{ required: true, message: '不能为空'}]"
        prop="type"
        label="类型">
        <el-input
          placeholder="请选择内容"
          v-model="model.type">
          <el-select
            v-model="model.type"
            style="width: 150px"
            slot="prepend"
            placeholder="请选择">
            <el-option
              v-for="(v) in typeArr"
              :label="v"
              :value="v"
              :key="v"/>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="作品时间">
        <el-col :span="11">
          <el-form-item prop="startDate">
            <el-date-picker
              v-model="model.startDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col
          :span="2"
          class="line w-text-center">-</el-col>
        <el-col :span="11">
          <el-form-item prop="endDate">
            <el-date-picker
              v-model="model.endDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"/>
          </el-form-item>
        </el-col>
      </el-form-item>
      <w-marked-editor
        ref="MARKED_EDITER"
        :imgbtn="true"
        :left="40"
        @save="saveBtnClick"/>
    </el-form>

    <!--添加数据的弹窗-->
    <!--登录弹窗-->
    <el-dialog
      :visible.sync="addCoversFormVisible"
      title="添加封面"
      width="400px">
      <el-form>
        <el-form-item>
          <el-input
            v-model="addCover"
            clearable
            placeholder="请输入图片地址"/>
        </el-form-item>
        <el-form-item v-if="addCover">
          <img
            :src="addCover"
            style="max-width: 200px"
            alt="">
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button @click="addCoversFormVisible = false">取 消</el-button>
        <el-button
          :disabled="!addCover"
          type="primary"
          @click="addCoverOkBtnClick">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import ProductModel from '@/models/web/ProductModel'
import WMarkedEditor from '@/components/pc/marked/editor'
import WUpImage from '@/components/global/imageUp/oss'
import Config from '@/config/index'
export default {
  name: 'AdminWebWorksAdd',
  components: {
    WMarkedEditor,
    WUpImage
  },
  data() {
    return {
      /**
       * 模型数据
       */
      model: new ProductModel(),
      /**
       * 添加封面弹窗是否显示
       */
      addCoversFormVisible: false,
      /**
       * 添加的封面
       */
      addCover: '',
      /**
       * 类型数组
       */
      typeArr: []
    }
  },
  mounted() {
    this.findOne()
    this.getTypeArr()
  },
  methods: {
    /**
     * 表单校验
     * @returns {Promise<any>}
     */
    checkForm() {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            resolve()
          } else {
            this.$w_popview.msgError('请完成填写')
            reject()
          }
        })
      })
    },
    /**
     * 添加确定按钮点击
     */
    addCoverOkBtnClick() {
      this.model.covers.push(this.addCover)
      this.addCover = ''
      this.addCoversFormVisible = false
    },
    /**
     * 提交按钮点击
     */
    saveBtnClick() {
      this.checkForm().w_then(() => {
        this.model.content = this.$refs['MARKED_EDITER'].getData()
        this.$refs['UP_IMAGE'].upImage().w_then_finally((img) => {
          this.model.cover = img
        }, () => {
          this.model.addOrUpdate().w_then()
        })
      })
    },
    /**
     * 获取单个数据
     */
    findOne() {
      if (this.$route.query.id) {
        this.model._id = this.$route.query.id
        this.model.getDetail().then((data) => {
          this.$refs['MARKED_EDITER'].setData(data.content)
        }).catch(() => {})
      }
    },
    /**
     * 获取类型数组
     */
    getTypeArr() {
      ProductModel.loadTypes().then((dataArr) => {
        this.typeArr = dataArr
      }).catch(() => {})
    },
    /**
     * 预览按钮点击
     */
    previewClick() {
      window.open(`#/web/works/detail?id=${this.model._id}`)
    }
  }
}
</script>

<style lang="scss" scoped>

  .admin-web-works-add {
    >.submint-btn {
    }
  }
  .icon {
    width: 200px;
  }

  /*封页*/
  .covers .covers-item {
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px;position: relative;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
  }

  .covers .covers-item-add {
    cursor: pointer;
  }

  .covers .covers-item img {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
  }

</style>
